<template>
  <div class="demo-item-layout">
    <div class="demo-item-layout-title">
      <slot name="title"></slot>
    </div>
    <div class="demo-item-layout-content">
      <slot></slot>
    </div>
    <div class="demo-item-layout-code">
      <el-collapse>
        <el-collapse-item title="代码" name="1">
          <div v-if="loading">loading...</div>
          <pre class="code">{{ code }}</pre>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    codeTxtFileName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      code: "",
    };
  },
  created() {
    this.loading = true;
    fetch(`/demo-code/${this.codeTxtFileName}.txt`)
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        response.text().then((text) => {
          this.code = text;
          this.loading = false;
        });
      })
      .catch((error) => {
        this.loading = false;
        console.error("Error fetching the file:", error);
      });
  },
};
</script>

<style scoped>
.demo-item-layout {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
.demo-item-layout-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
.demo-item-layout-content {
  margin-bottom: 10px;
}
.demo-item-layout-code .code{
  background: #f7F8fb;
}
</style>
